<template>
    <div class="login">
        <div class="main">
            <h1>WOW SURPRISE </h1>
            <h2>后台管理系统</h2>
			<div class="name">
				账号：<el-input prefix-icon='el-icon-user-solid' placeholder="请输账号" v-model.trim="name"></el-input>
			</div>
			<div class="pass">
				密码：<el-input prefix-icon='el-icon-lock' @keyup.enter.native='submit' placeholder="请输入密码" v-model.trim="pass" show-password></el-input>
			</div>
			<el-button type="primary" :loading="loading" @click="submit">登录</el-button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            name:null,
            pass:null,
            loading:false
        }
    },
    mounted(){

    },
    methods:{
        async submit(){
			let form = {
				manager_username:this.name,
				manager_password:this.pass
			}
			if (!this.name) {
				this.$message({
					message: '亲，账号不能不填哦~',
					type: 'warning'
				});
			}else if (!this.pass) {
				this.$message({
					message: '亲，密码不能不填哦~',
					type: 'warning'
				});
			}else{
				this.loading = true
                let {data:{code,data}} = await this.$http.post(this.$api.login,form,false)
                this.loading = false
                if (code == 0) {
                    this.$message({
                        message: '登录成功',
                        type: 'success'
                    });
                    localStorage.setItem('isLogin',true)
                    localStorage.setItem('userid',data.manager_merchant_id)
                    this.$router.push('/')
                }
			}
		}
    }
}
</script>
<style lang="scss" scoped>
    .login{
        width: 100%;
        height: 100vh;
        /* background:url("../assets/zm.png") center/cover no-repeat; */
    }
    .main::before{
		background:url(../assets/zm.png) 0 / cover fixed;
	}
	.main{
		width: 400px;
		position: absolute;
		left:calc(50% - 200px);
		top:calc(50% - 220px);
		padding:20px;
		background: hska(0,0%,100%,.2);
		overflow: hidden; 
		box-shadow: 0 0 5px rgba(0, 0, 0, .3);
        h1{
            font-size: 18px;
            position: relative;

        }
        h2{
            text-align: center;
            position: relative;
        }
        .name,.pass{
            line-height: 40px;
            position: relative;
            text-align: left;
        }
        button{
            position: relative;
            width: 100%;
            margin-top: 20px;
        }
	}
	.main::before{
		content: '';
		position: absolute;
		top:0;right:0;bottom:0;left:0;
		filter: blur(15px);
		margin:-30px; 
	}
</style>